<template>
  <div class="cms-views-container bg-[#f6f8fb] h-[667px] overflow-hidden atlas-list-pages">
    <CmsVideoHeader :title="type === 1 ? '分类' : '更多'" :text="{ color: '#48494D', backgroundColor: 'white' }" />
    <!-- 筛选条件 -->
    <CmsFilterView
      :type="1"
      novel
      @click="handleClick('filterCriteria')"
      :class="{ 'component-selected': select === 'filterCriteria' }"
      v-if="type === 1"
    />
    <!-- 列表数据 -->
    <CmsAtlasLsit
      :type="1"
      :cardStyle="{ backgroundColor: '#FFF4F0' }"
      :selectStyle="3"
      @click="handleClick(type === 1 ? 'filterResultList' : 'atlasMoreList')"
      :class="{ 'component-selected': select === 'filterResultList' || 'atlasMoreList' }"
    />
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'

import CmsComponents from '@cms/components'
import type { ComponentKeys } from '@cms/h5-editor'
const { CmsFilterView, CmsVideoHeader, CmsAtlasLsit } = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.atlas-list-pages {
  .free,
  .vip,
  .gold {
    border-radius: 0 4px 0 4px;
  }
  .free {
    background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
  }
  .vip,
  .gold {
    background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
  }
}
</style>
